<template>
  <div class="userbox">
    <div class="left"><map-drag :center='local' :name='toponym'></map-drag></div>
    <div class="right">
      <div style="height: 35%">
        <div id="clock">
          <p class="date">{{ date }}</p>
          <p class="time">{{ time }}</p>
          <p class="text">Cherish every day</p>
        </div>
      </div>
      <div class="right-info">
        <div class="access" v-for="(item,index) in localhost" :key="index" @click="selectLoc(item)">
          <img src="../../assets/images/AIimg.png" alt="" />
          <div>
            <p class="name">{{item.name}}</p>
            <p class="remark">{{item.people}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from "vue";
import mapDrag from "@/components/mapDrag/index.vue";
export default defineComponent({
  setup() {
    let time = ref("");
    let date = ref("");
    let toponym = ref("武汉市江夏区万科红郡");
    let local = ref([114.298572, 30.584355]);
    var week = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
    let localhost = reactive([{
          toponym: '湖北省随州市洪山镇',
          name:'刘金鹏',
          longitude: '31.671916',
          latitude: '112.906815',
          people: '这人很懒什么都没留下'
        },
        {
          toponym: '武汉市江夏区万科红郡',
          name:'佘万森',
          longitude: '30.454367',
          latitude: '114.413154',
          people: '消灭人类暴政，世界属于三体'
        },
        {
          toponym: '安徽省合肥市长丰县双凤开发区北城新区魏武路京冠御园华府',
          name:'赵静',
          longitude: '31.982571',
          latitude: '117.25627',
          people: '这人很懒什么都没留下'
        },
        {
          toponym: '湖北省随州市随县尚市镇净明铺村二组',
          name:'汪东城',
          longitude: '31.911764',
          latitude: '113.215423',
          people: '这人很懒什么都没留下'
        }])
    let zeroPadding = (num, digit) => {
      let zero = "";
      for (var i = 0; i < digit; i++) {
        zero += "0";
      }
      return (zero + num).slice(-digit);
    };
    let updateTime = () => {
      var cd = new Date();
      time.value =
        zeroPadding(cd.getHours(), 2) +
        ":" +
        zeroPadding(cd.getMinutes(), 2) +
        ":" +
        zeroPadding(cd.getSeconds(), 2);
      date.value =
        zeroPadding(cd.getFullYear(), 4) +
        "-" +
        zeroPadding(cd.getMonth() + 1, 2) +
        "-" +
        zeroPadding(cd.getDate(), 2) +
        " " +
        week[cd.getDay()];
    };
    var timerID = setInterval(updateTime, 1000);
    updateTime();
    const selectLoc = (val) => {
        local.value = [val.latitude, val.longitude]
        toponym.value = val.toponym
    }
    return { time, date, localhost, selectLoc, local, toponym };
  },
  components: { mapDrag },
});
</script>

<style lang="scss" scoped>
.userbox {
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  .left {
    width: 60%;
    height: 100%;
    margin-right: 100px;
    animation: 3s zhetranslateL linear  normal;
  }
  .right {
    width: 38%;
    height: 100%;
    #clock {
      font-family: "Share Tech Mono", monospace;
      color: #ffffff;
      text-align: center;
      position: absolute;
      right: 2%;
      top: 20%;
      transform: translate(-50%, -50%);
      color: #daf6ff;
      text-shadow: 0 0 20px rgba(10, 175, 230, 1),
        0 0 20px rgba(10, 175, 230, 0);
      .time {
        letter-spacing: 0.05em;
        font-size: 80px;
        padding: 5px 0;
      }
      .date {
        letter-spacing: 0.1em;
        font-size: 24px;
      }
      .text {
        letter-spacing: 0.1em;
        font-size: 12px;
        padding: 20px 0 0;
      }
    }
    .right-info {
      height: 50%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      .access:nth-child(1){
        animation: 1s wordsLoop linear normal
      }
      .access:nth-child(2){
        animation: 1.5s wordsLoop linear normal
      }
      .access:nth-child(3){
        animation: 2s wordsLoop linear normal
      }
      .access:nth-child(4){
        animation: 2.5s wordsLoop linear normal
      }
      .access {
        width: 80%;
        height: 100px;
        background: #ffffff;
        border-radius: 10px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        img {
          width: 80px;
          height: 80px;
          border-radius: 10px;
          margin: 0 20px;
        }
        .name {
          color: rgb(0, 106, 255);
          font-size: 18px;
          line-height: 30px;
        }
        .remark {
          color: #666;
          font-size: 12px;
        }
      }
    }
  }
}
.access:hover{
   box-shadow: 0px 0px 15px #fff;
   cursor: pointer;
}
@keyframes wordsLoop {
    0% {
            transform: translateX(100%);
            -webkit-transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
    }
}
@keyframes zhetranslateL {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
</style>
